
<template>
	<ul>
		<li v-for="(link,i) in links" :key="i">
			<router-link :to="link.route">
				<div :key="i" @click="handleClick(i)">
					<img :src="rootUrl + link.imgUrl" /> {{ link.tag }}
				</div>
			</router-link>

		</li>

	</ul>

</template>

<script>
	export default {
		data: () => ({
			rootUrl: "http://m.wangjiu.com/",
//			activeIndex: 1
		}),
		mounted() {
			let s = this.$route.path;
			switch(s) {
				case '/index':
					{
						this.$store.state.activeIndex = 1
						break
					}
				case '/category':
					{
						this.$store.state.activeIndex = 2
						break
					}
					/*case '/find': {
					  this.activeIndex = 3
					  break
					}*/
				case '/buycart':
					{
						this.$store.state.activeIndex = 3
						break
					}
				case '/mine1':
					{
						this.$store.state.activeIndex = 4
						break
					}
			}
		},
		computed: {
			links() {
				return [{
						route: "/",
						imgUrl: `htmlResource/images/index/${this.$store.state.activeIndex === 1
            ? "s"
            : "d"}01.png`,
						tag: "首页"
					},
					{
						route: "/category",
						imgUrl: `htmlResource/images/index/${this.$store.state.activeIndex === 2
            ? "s"
            : "d"}02.png`,
						tag: "分类"
					},
					{
						route: "/buycart",
						imgUrl: `htmlResource/images/index/${this.$store.state.activeIndex === 3
            ? "s"
            : "d"}03.png`,
						tag: "购物车"
					},
					{
						route: "/mine1",
						imgUrl: `htmlResource/images/index/${this.$store.state.activeIndex === 4
            ? "s"
            : "d"}04.png`,
						tag: "我的"
					}
				];
			}
		},
		methods: {
			handleClick(i) {
				this.$store.state.activeIndex = i + 1;
			}
		}
	}
</script>

<!--<style lang="scss" scoped>-->
// 导航 /*.down_nav { background: #f9f9f9; overflow: hidden; position: fixed; bottom: 0; width: 100%; height: 1.3rem; z-index: 999; max-width: 10rem; a { display: block; position: relative; float: left; color: #666666; font-size: 0.3rem; width: 25%; height: 2rem; text-align: center; margin-top: 2px; img { display: block; width: 0.7rem; height: 0.7rem; margin: 0 auto 1px; padding-top: 2%; } span { display: inline-block; height: 1.2em; overflow: hidden; } } .router-link-exact-active { color: #cc0103 !important; } } */ footer { height: .45rem; background: #fff; ul { height: 100%; @include border(1px 0 0 0); @include flexbox(); text-align: center; li { @include flex(); @include justify-content(center); @include align-items(center); a { color: #333; i { display: block; width: .2rem; height: .25rem; font-size: .2rem; color: #c2cfcc; margin: auto; } b { font-weight: 100; font-size: .1rem; height: .2rem; display: block; } &.active b, &.active i { color: red; } } } } }
<!--</style>-->
